<template>
  <el-row>
    <el-col :span="8">
      <el-card class="box-card">
        <div class="text">
          <img src="../images/85.jpg" alt="" />
          <div class="userinfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="clearfix">
          <p class="time">当前登录时间:<span>{{time}}</span></p>
          <p class="palce">上次登录地点:<span>江西</span></p>
        </div>
      </el-card>
      <el-card class="text2">
        <el-table :data="tableData" style="width: 100%">
          <!-- <el-table-column
        prop="curriculum"
        label="课程"
        width="100">
      </el-table-column>
      <el-table-column
        prop="Buy_Today"
        label="今日购买"
        width="100">
      </el-table-column>
      <el-table-column
        prop="Buy_Month"
        label="本月购买"
        width="100">
      </el-table-column>
      <el-table-column
        prop="Total_purchase"
        label="总购买">
      </el-table-column> -->
          <el-table-column
            v-for="(val,key) in tableLabel"
            :prop="key"
            :label="val"
            :key="key"
         width="100"/>
         
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
    <div class="box">
    <el-card v-for="(val,key) in countData" :key="key" :class="'right1'" :body-style="{display:'flex',padding:0}">
      <div class="box1" :style='{background:val.color}'>
      <i :class="`el-icon-${val.icon}`" :style="{color:'white'}"></i>
    </div>
      <div class="box2">
      <span class="price">￥{{val.value}}</span>
      <span class="des">{{val.name}}</span>
      </div>
    </el-card>
    </div>
    <el-card style="height:280px;margin-left: 15px;margin-bottom: 20px;" class="graphx">
      <div ref="echarts1" style="height:270px;width:900px;margin-bottom: 5px;margin-left: -30px;"></div>
    </el-card>
    <div class="graph">
      <el-card style="height:260px;width:420px;margin-left: 15px;" >
      <div ref="echarts2" style="height:260px;width:380px"></div>
    </el-card>
      <el-card style="height:260px;width:420px;margin-left: 25px;">
        <div ref="echarts3" style="height:250px;width:380px;"></div>
      </el-card>
    </div>
    </el-col>
  </el-row>
</template>

<script>
 import {getData} from '../api';
 import *as echarts from 'echarts';
 import {nowtime} from '../time/index'
export default {
  name: "MyHome",
  data() {
    return {
      tiem:'',
      tableData: [
      {
            name: 'oppo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000
          },
          {
            name: 'vivo',
            todayBuy: 300,
            monthBuy: 2200,
            totalBuy: 24000
          },
          {
            name: '苹果',
            todayBuy: 800,
            monthBuy: 4500,
            totalBuy: 65000
          },
          {
            name: '小米',
            todayBuy: 1200,
            monthBuy: 6500,
            totalBuy: 45000
          },
          {
            name: '三星',
            todayBuy: 300,
            monthBuy: 2000,
            totalBuy: 34000
          },
          {
            name: '魅族',
            todayBuy: 350,
            monthBuy: 3000,
            totalBuy: 22000
          }
      ],
      tableLabel:{
        name:"课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买",
      },
      countData:[{
name:'今日支付订单',
value:1234,
icon:'success',
color:'#2ec7c9',
      },
      {
name:'今日收藏订单',
value:210,
icon:'star-on',
color:'#ffb980',
      },
      {
name:'今日未支付订单',
value:1234,
icon:'s-goods',
color:'#5ab1ef',
      },
      {
name:'本月支付订单',
value:1234,
icon:'success',
color:'#2ec7c9',
      },
      {
name:'本月收藏订单',
value:210,
icon:'star-on',
color:'#ffb980',
      },
      {
name:'本月未支付订单',
value:1234,
icon:'s-goods',
color:'#5ab1ef',
      }],  
    };
  },
  mounted(){
    this.time=nowtime()
    getData().then(({data})=>{
      console.log(data)
      const {tableData}=data.data
      this.tableData=tableData
    var echarts1=echarts.init(this.$refs.echarts1);
    var echarts10ption={}//处理xAxis
    const {orderData}=data.data
    const xAxis=Object.keys(orderData.data[0])
    const [xAxis1]=[orderData.a]
    const xAxisData={
      data:xAxis
    }
    echarts10ption.xAxis={data:xAxis1}
    echarts10ption.yAxis={}
    echarts10ption.legend=xAxisData
    echarts10ption.series=[]
    xAxis.forEach(key=>{
      echarts10ption.series.push({
      name:key,
      data:orderData.data.map(item=>item[key]),
      type:'line'
    })
    })
     echarts1.setOption(echarts10ption);
    //柱状图
    var echarts2=echarts.init(this.$refs.echarts2);
    var echarts11ption={}//处理xAxis
    const {userData}=data.data
    const xAxis2=userData.map(item=>item.date)
    echarts11ption.xAxis={
      data:xAxis2
    }
    echarts11ption.yAxis={
      type: 'value'
    }
    echarts11ption.legend=[{
  }],
    echarts11ption.series=[]
      echarts11ption.series.push({
        name:'新增用户',
        itemStyle: {
            color: '#29B8BD'
          },
      data:userData.map(item=>item.new),
      type:'bar'
    },
    {
      name:'活跃用户',
      itemStyle: {
            color: '#BBA4E1'
          },
      data:userData.map(item=>item.active),
      type:'bar'
    }
    ),
     echarts2.setOption(echarts11ption);
     //饼状图
     var echarts3=echarts.init(this.$refs.echarts3);
    var echarts12ption={}//处理xAxis
    const {videoData}=data.data
    echarts11ption.legend={
      orient: 'vertical',
      left: 'left'
  },
  echarts12ption.title={
    text: 'price',
    left: 'center',
  },
  echarts12ption.tooltip={
    trigger: 'item'
  },
    echarts12ption.series=[]
      echarts12ption.series.push({
        name:'价格',
        type: 'pie',
       radius: '50%',
       data:videoData.map(item=>item),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    ),
     echarts3.setOption(echarts12ption);
    })
  }
};
</script>

<style scoped>
.text {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #ccc;
}
el-table {
  margin-top: 20px;
}
img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-right: 40px;
  margin-right: 40px;
  margin-bottom: 15px;
}
.access {
  color: #999999;
}
.name {
  font-size: 32px;
  margin-bottom: 10px;
  color: black;
}
.clearfix p span {
  padding-left: 60px;
}
.clearfix {
  color: #999999;
  font-size: 14px;
}
.text2 {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  height: 447px;
}
.right1{
  width:31%;
  margin-left:15px;
  margin-bottom: 15px;
}
.box{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
}
.box1{
width:80px;
height:80px;
font-size: 30px;
line-height: 80px;
text-align: center;
}
.box2{
width:160px;
 height:80px;
 display: flex;
 flex-direction: column;
justify-content: center;
margin-left: 15px;
}
.price{
  font-size: 30px;
  margin-bottom: 10px;
}
.des{
  font-size: 14px;
  color: #999;
}
.el-card__body{
  display: flex;
  flex-direction: row;
}
.graph{
  display: flex;
  justify-content: space-between;
}
</style>